<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>
        京东商品分类 -
        京东商城
    </title>

    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/category.css">
</head>
<body>

<!--顶部-->
<div class="jd_base_header">
    <!--顶部显示的topbar-->
    <div class="jd_topbar">
        <a href="index.html" class="icon_back"></a>
        <form action="">
            <span class="icon_search"></span>
            <!--search主要是在弹出键盘右下角的键变成"搜索"-->
            <input type="search" placeholder="搜索占位文字">
        </form>
        <div class="icon_shortcut"></div>
    </div>
    <!--快捷菜单-->
    <ul class="jd_shortcut" style="display: none">
        <li>
            <a href="index.html">
                <span class="icon_home"></span>
                <p>首页</p>
            </a>
        </li>
        <li class="current">
            <a href="#">
                <span class="icon_category"></span>
                <p>分类搜索</p>
            </a>
        </li>
        <li>
            <a href="cart.html">
                <span class="icon_cart"></span>
                <p>购物车</p>
            </a>
        </li>
        <li>
            <a href="me.html">
                <span class="icon_me"></span>
                <p>我的京东</p>
            </a>
        </li>
    </ul>
</div>
<!--主要内容-->
<div class="jd_main">
    <!--左边列表-->
    <div class="jd_main_left">
        <ul>
            <li class="current"><a href="javascript:;">家用电器</a></li>
            <li><a href="javascript:;">电脑办公</a></li>
            <li><a href="javascript:;">手机数码</a></li>
            <li><a href="javascript:;">母婴童装</a></li>
            <li><a href="javascript:;">图书</a></li>
            <li><a href="javascript:;">家居家纺</a></li>
            <li><a href="javascript:;">厨房用品</a></li>
            <li><a href="javascript:;">家居建材</a></li>
            <li><a href="javascript:;">食品生鲜</a></li>
            <li><a href="javascript:;">酒水饮料</a></li>
            <li><a href="javascript:;">运动户外</a></li>
            <li><a href="javascript:;">鞋靴箱包</a></li>
            <li><a href="javascript:;">奢品礼品</a></li>
            <li><a href="javascript:;">钟表珠宝</a></li>
            <li><a href="javascript:;">玩具乐器</a></li>
            <li><a href="javascript:;">内衣配饰</a></li>
            <li><a href="javascript:;">汽车用品</a></li>
            <li><a href="javascript:;">音像制品</a></li>
            <li><a href="javascript:;">医药保健</a></li>
            <li><a href="javascript:;">计生情趣</a></li>
            <li><a href="javascript:;">全球购</a></li>
            <li><a href="javascript:;">京东金融</a></li>
            <li><a href="javascript:;">生活旅行</a></li>
            <li><a href="javascript:;">宠物农资</a></li>
        </ul>
    </div>
    <!--右边主要内容-->
    <div class="jd_main_right">
        <!--顶部广告图-->
        <a class="jd_category_banner" href="javascript:;"><img src="images/banner_1.jpg" alt=""></a>
        <!--各种类型的产品-->
        <div class="jd_category_seciton">
            <h4>各种手机</h4>
            <ul class="clearfix">
                <li>
                    <a href="">
                        <img src="images/buy-pro1.jpg" alt="">
                        <p>手机</p>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="images/buy-pro1.jpg" alt="">
                        <p>手机</p>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="images/buy-pro1.jpg" alt="">
                        <p>手机</p>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="images/buy-pro1.jpg" alt="">
                        <p>手机</p>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="images/buy-pro1.jpg" alt="">
                        <p>手机</p>
                    </a>
                </li>
            </ul>
        </div>

        <div class="jd_category_seciton">
            <h4>各种衣服</h4>
            <ul class="clearfix">
                <li>
                    <a href="">
                        <img src="images/nv-fy.jpg" alt="">
                        <p>衣服</p>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="images/nv-fy.jpg" alt="">
                        <p>衣服</p>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="images/nv-fy.jpg" alt="">
                        <p>衣服</p>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="images/nv-fy.jpg" alt="">
                        <p>衣服</p>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="images/nv-fy.jpg" alt="">
                        <p>衣服</p>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div>

<script src="js/base.js"></script>
<script src="js/category.js"></script>
</body>
</html>